<template>
  <div class="chart-dialog">
    <div class="chart-bg">
      <div class="title-box">
        <div class="title-content">
          {{ titleName }}
        </div>
        <div class="close-btn" @click="onClickCloseBtn">
          <img src="../../assets/imgs/close.png" alt="关闭" />
        </div>
      </div>
      <div class="chart-box" id="chartBox"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, computed } from "vue";
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
});
const titleName = computed(() => {
  if (props.type == "1") {
    return "实时洪水过程线";
  } else if (props.type == "2") {
    return "水位过程线";
  } else if (props.type == "3") {
    return "预报洪水过程线";
  } else if (props.type == "4") {
    return "位移过程线";
  }
  return "";
});

onMounted(() => {
  let xAxis = [
    "4:00",
    "4:30",
    "5:00",
    "5:30",
    "6:00",
    "6:30",
    "7:00",
    "7:30",
    "8:00",
    "8:30",
    "9:00",
    "9:30",
    "10:00",
    "10:30",
  ];
  let outYAxis = [
    0,
    0.01,
    0.16,
    1.4,
    6.91,
    16.33,
    25,
    29.02,
    22,
    15.66,
    10,
    5,
    3,
    2,
  ];
  let inYAxis = [
    0,
    0.78,
    6.27,
    21.18,
    53.33,
    78.43,
    61.17,
    29.02,
    14.12,
    7.06,
    3.14,
    1.57,
    0.78,
    0.0,
  ];
  if (props.type == "1") {
    let inArr = [];
    let outArr = [];
    for (let i = 0; i < inYAxis.length; i++) {
      const element = inYAxis[i];
      inArr.push(parseFloat((element * 0.6).toFixed(2)));
      const ele = outYAxis[i];
      outArr.push(parseFloat((ele * 0.6).toFixed(2)));
    }
    renderWaterChart(xAxis, inArr, outArr);
  } else if (props.type == "2") {
    renderPositionChart();
  } else if (props.type == "3") {
    renderWaterChart(xAxis, inYAxis, outYAxis);
  } else if (props.type == "4") {
    renderDisplacementChart();
  }
})

const emits = defineEmits(["closeChartDialog"]);
const onClickCloseBtn = () => {
  emits("closeChartDialog", {});
};
let myChart2: any = null;
function renderPositionChart() {
  if (myChart2) {
    myChart2.dispose();
  }
  let timeArr = [
    "4:00",
    "4:30",
    "5:00",
    "5:30",
    "6:00",
    "6:30",
    "7:00",
    "7:30",
    "8:00",
    "8:30",
    "9:00",
    "9:30",
    "10:00",
    "10:30",
  ];
  let jhArr = [];
  let sjArr = [];
  let yjArr = [];
  let scArr = [
    586.3, 590, 594.6, 598.1, 600, 601.5, 602.1, 601.9, 601.3, 600.8, 600.2, 599.6, 598.9,
    597.5,
  ];

  for (let i = 0; i < timeArr.length; i++) {
    jhArr.push(600);
    sjArr.push(599.1);
    yjArr.push(598.1);
  }

  myChart2 = echarts.init(document.getElementById("chartBox"));
  let option = {
    tooltip: {
      trigger: "axis",
      textStyle: {
        fontSize: 18,
        fontWeight: 'blod',
        fontFamily: 'PingFangReg'
      },
    },
    legend: {
      data: ["设计水位", "校核水位", "预警水位", "实测水位"],
      textStyle: {
        color: "#fff",
        fontSize: 18,
        fontFamily: 'PingFangReg'
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: timeArr,
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "value",
      min: 586.3,
      axisLabel: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "设计水位",
        type: "line",
        data: sjArr,
        smooth: true,
        itemStyle: {
          normal: {
            color: '#ed8b23', // 点的颜色
            lineStyle: {
              color: '#ed8b23' // 线的颜色
            }
          }
        },
      },
      {
        name: "校核水位",
        type: "line",
        data: jhArr,
        smooth: true,
        itemStyle: {
          normal: {
            color: '#e72d0d', // 点的颜色
            lineStyle: {
              color: '#e72d0d' // 线的颜色
            }
          }
        },
      },
      {
        name: "预警水位",
        type: "line",
        data: yjArr,
        smooth: true,
        itemStyle: {
          normal: {
            color: '#7fb26b', // 点的颜色
            lineStyle: {
              color: '#7fb26b' // 线的颜色
            }
          }
        },
      },
      {
        name: "实测水位",
        type: "line",
        data: scArr,
        smooth: true,
        itemStyle: {
          normal: {
            color: '#415798', // 点的颜色
            lineStyle: {
              color: '#415798' // 线的颜色
            }
          }
        },
      },
    ],
  };

  myChart2.setOption(option);
}
let myChart4: any = null;
function renderWaterChart(xAxis: Array<string>, inYAxis: Array<number>, outYAxis: Array<number>) {
  if (myChart4) {
    myChart4.dispose();
  }
  myChart4 = echarts.init(document.getElementById("chartBox"));
  const option = {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(255,255,255,0)",
      borderWidth: 0,
      axisPointer: {
        type: "line",
        lineStyle: {
          type: "dashed",
          color: "#89939F",
        },
      },
      textStyle: {
        color: "#fff",
        fontSize: 18,
        fontWeight: 700,
        fontFamily: 'PingFangReg'
      },
      formatter: (params: any) => {
        return `<div style='background: #071027; padding: 0 20px;'><div style="color: #b0ee94; font-weight: 700;">入库：${params[0].value}m³/s</div><div style="color: #ff5656; font-weight: 700;">出库：${params[1].value}m³/s</div></div>`;
      },
    },
    legend: {
      right: "0%",
      textStyle: {
        color: "#fff",
        fontSize: 18,
        fontFamily: 'PingFangReg'
      },
    },
    grid: {
      top: "20%",
      left: "1%",
      right: "5%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: "#306269",
        },
      },
      axisLabel: {
        //坐标轴刻度标签的相关设置
        textStyle: {
          color: "#C1C5CB",
          margin: 15,
        },
      },
      axisTick: {
        show: false,
      },
      data: xAxis,
    },
    yAxis: {
      type: "value",
      name: "F(m³/s)",
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#233e64",
        },
      },
      axisLine: { show: false },
      axisLabel: {
        textStyle: {
          color: "#C1C5CB",
        },
      },
    },
    series: [
      {
        name: "入库洪水过程线",
        type: "line",
        smooth: true,
        lineStyle: {
          normal: {
            color: "#b0ee94", // 线条颜色
          },
        },
        data: inYAxis,
      },
      {
        name: "出库洪水过程线",
        type: "line",
        smooth: true,
        lineStyle: {
          normal: {
            color: "#ff5656", // 线条颜色
          },
        },
        data: outYAxis,
      },
    ],
  };
  myChart4.setOption(option);
}
let myChart5: any = null;
function renderDisplacementChart() {
  if (myChart5) {
    myChart5.dispose();
  }
  let timeArr = [
    "4:00",
    "4:30",
    "5:00",
    "5:30",
    "6:00",
    "6:30",
    "7:00",
    "7:30",
    "8:00",
    "8:30",
    "9:00"
  ];
  let XArr = [];
  let yArr = [];
  let zArr = [];

  for (let i = 0; i < timeArr.length; i++) {
    var itemX = 0;
    if (i < 6) {
      itemX = 1 * i;
    } else {
      itemX = 2 * i;
    }
    XArr.push(itemX.toFixed(1));
    var itemY = 0;
    if (i < 6) {
      if (i > 3) {
        itemY = -2 - 1 * i;
      } else {
        itemY = -2 - 2 * i;
      }
    } else {
      itemY = 1 - 3 * i;
    }
    yArr.push(itemY.toFixed(1));
    var itemZ = 0;
    if (i < 6) {
      itemZ = -5 - 2 * i;
    } else {
      itemZ = -12 - 3 * i;
    }
    zArr.push(itemZ.toFixed(1));
  }

  myChart5 = echarts.init(document.getElementById("chartBox"));
  let option = {
    tooltip: {
      trigger: "axis",
      textStyle: {
        fontSize: 18,
        fontWeight: 'blod',
        fontFamily: 'PingFangReg'
      },
    },
    legend: {
      data: ["X位移(累计)", "Y位移(累计)", "Z位移(累计)"],
      textStyle: {
        color: "#fff",
        fontSize: 18,
        fontFamily: 'PingFangReg'
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      name: "(t)",
      nameLocation: 'end',
      boundaryGap: false,
      data: timeArr,
      axisLabel: {
        color: "#fff",
      },
      nameTextStyle: {
        color: "#fff"
      },
    },
    yAxis: {
      type: "value",
      // min: 586.3,
      name: "(mm)",
      axisLabel: {
        color: "#fff",
      },
      nameTextStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "X位移(累计)",
        type: "line",
        data: XArr,
        smooth: true,
      },
      {
        name: "Y位移(累计)",
        type: "line",
        data: yArr,
        smooth: true,
      },
      {
        name: "Z位移(累计)",
        type: "line",
        data: zArr,
        smooth: true,
      },
    ],
  };
  myChart5.setOption(option);
}
</script>

<style lang="less" scoped>
.chart-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9990;

  .chart-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45%;
    height: 60%;
    background: url(../../assets/imgs/dialogBg.png) no-repeat center;
    background-size: 100% 100%;

    .title-box {
      position: absolute;
      left: 3%;
      top: 2.4%;
      width: calc(100% - 6%);
      height: 60px;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-content {
        font-family: "YSBTH";
        color: #fff;
        font-size: 34px;
      }

      .close-btn {
        // width: 30px;
        cursor: pointer;

        img {
          display: block;
          // width: 100%;
        }
      }
    }

    .chart-box {
      position: absolute;
      left: 3%;
      top: calc(2.4% + 62px);
      width: calc(100% - 6%);
      height: 44vh;
      // border: 1px solid aqua;
    }
  }
}
</style>
